<template>
  <div class="contain">
       <!-- 大标题 -->
    <el-row class="title">
      <div >PU3000工位设备状态</div>
    </el-row>
    <div class="contain_top">
      <div class="left">
        <div style="height: 15%; background-color: rgb(17, 59, 218)">
          <svg-icon icon-class="pu3000_monitor"
                    class-name="monitor_class" />
          <span style="margin-left: 30px; font-size: 30px"> 状态监控</span>
        </div>
        <div id="leftchart1"></div>
        <div id="leftchart2"></div>
        <div id="leftchart3"></div>
      </div>
      <div class="center">
        <div style="height: 80%">
              <video id="movies" type="video/mp4" loop="loop"  autoplay>
          <source src="@/assets/lp.mp4" />
        </video>
        </div>
      
        <el-row :gutter="15" style="height: 20%">
          <el-col :span="6">
            <div class="ye" style="left:20px">
                <div v-if="Youqi_switch1" style="font-size: 20px;color:#279B3E">加料中</div>
                <div v-if="Youqi_open1" style="font-size: 20px;color:#E5F25A">开盖状态</div>
            </div>
             
            <div style="height: 100%;  text-align: center">
              
              <div style="font-size: 30px; ">{{Youqi_yuanliao }}KG</div>
              <img  src="@/assets/images/tianping.jpg"  width="120" height="60">
              <div style="font-size: 20px; margin:0px 50px 0px 50px; ">
                油漆原料桶质量
              </div>
            </div>
          </el-col>
          <el-col :span="6">
             <div style="height: 100%;  text-align: center">
              <div style="font-size: 30px; ">{{Youqi_jiaoban }}KG</div>
              <img  src="@/assets/images/tianping.jpg"  width="120" height="60">
              <div style="font-size: 20px; margin:0px 50px 0px 50px;  ">
                油漆搅拌桶质量
              </div>
            </div>
          </el-col>
          <el-col :span="6">
           <div style="height: 100%;  text-align: center">
              <div style="font-size: 30px; ">{{Guhua_jiaoban }}KG</div>
              <img  src="@/assets/images/tianping.jpg"  width="120" height="60">
              <div style="font-size: 20px;  margin:0px 50px 0px 50px; ">
                固化剂搅拌桶质量
              </div>
            </div>
           
          </el-col>
          <el-col :span="6">
              <div class="ye" style="right: 20px;">
                <div v-if="Guhua_switch2" style="font-size: 20px;color:#279B3E">加料中</div>
                <div v-if="Guhua_open2" style="font-size: 20px;color:#E5F25A">开盖状态</div>
            </div>
            <div style="height: 100%;  text-align: center">
              <div style="font-size: 30px; ">{{Guhua_yuanliao }}KG</div>
              <img  src="@/assets/images/tianping.jpg"  width="120" height="60">
              <div style="font-size: 20px;  margin:0px 50px 0px 50px; ">
                固化剂原料桶质量
              </div>
            </div>

           
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <div style=" height: 15%; background-color: rgb(17, 59, 218); text-align: center; ">
          <svg-icon icon-class="pu3000_barchart"
                    class-name="barchart_class" />
          <span style="margin-left: 30px; font-size: 30px"> 耗量统计</span>
        </div>
         <div id="rightchart1"></div>
         <div id="rightchart2"></div>       
      </div>
    </div>
    <div class="contain_bottom">
      <el-row :gutter="15" style="background-color: #274384;height: 100%">
        <el-col :span="4">
          <div style="background-color: rgb(17, 59, 218); height: 100%">
            <svg-icon icon-class="pu3000_linechart"
                      class-name="linechart_class" />
            <div style="margin-top: 30px; font-size: 30px; text-align: center">
              数据分析
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div id="buttomchart1"
               style="height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="buttomchart2"
               style="height: 100%"></div>
        </el-col>
        <el-col :span="4">
          <div style="height: 100%;background-color: rgb(17, 59, 218)">
            <div style=" height: 42%;">
              <div style="float:left;height: 100%;margin-top: 10px;">
                 <img id="chanlaingimg" src="@/assets/images/chanlaing.jpg">
              </div>
               <div style="float:left; margin-top: 30px;margin-left: 20px">
                 <div style="font-size: 25px; line-height: 15px; text-align: center">今日产出</div>
                 <div style="margin-top: 10px;margin-left: 10px">
                     <div style="font-size: 25px; height:30px; width:50px; text-align: center; background-color: rgb(0, 176, 80);float:left;">{{ DailyOutput}}</div>
                     <div style="float:left;font-size: 25px;margin-left: 17px">节</div>
                 </div>          
               </div>
             
            </div>
            <div style="height: 42%; margin-top: 15px;">
               <div style="float:left;height: 100%;">
                 <img id="chanlaingimg" src="@/assets/images/chanlaing.jpg">
              </div>
               <div style="float:left; margin-top: 30px;margin-left: 20px">
                 <div style="font-size: 25px;  line-height: 15px; text-align: center">本月已产出</div>
                 <div style="margin-top: 10px;margin-left: 10px">
                     <div style="font-size: 25px; height:30px; width:50px; text-align: center; background-color: rgb(0, 176, 80);float:left;">{{ HistoryOutPut}}</div>
                     <div style="float:left;font-size: 25px;margin-left: 17px">节</div>
                 </div>          
               </div>

            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  GetRealData,
  TotalMonthUsed,
  TotalDayUsed,
  GetPeibiChart,
  MonthYouQiUsed
} from "@/api/devicemanage/PU3000";
import {MonthChanLiang } from "@/api/devicemanage/devicedata";
export default {
  data() {
    return {
      Youqi_open1:false,
       Guhua_open2:false,
        Youqi_switch1:false,
         Guhua_switch2:false,
      timer: null,
      leftchart1: null,
      leftchart2: null,
      leftchart3: null,
      rightchart1: null,
      rightchart2: null,
      buttomchart1: null,
      buttomchart2: null,
      timer: null,
      // 左侧三个仪表盘
      Aoption: {
        series: [
          {
             min:0,
             max:63,
             splitNumber:9,
            type: "gauge",
            radius: "80%", //占满div
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, "#67e0e3"],
                  [0.8, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 15,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 5,
              fontSize: 10,
            },
            title: {
            offsetCenter: [0, '50%'],
            textStyle: {
            color: "White",
          },
            fontSize: 10
            },
            detail: {
              valueAnimation: true,
              formatter: "A泵压力: {value}",
              fontSize: 19,
              offsetCenter: [0, "85%"],
              color: "auto",
            },
            data: [
              {
                value: 0,
                name: 'Mpa'
              },
            ],
          },
        ],
      },
      Boption: {
        series: [
          {
             min:0,
             max:63,
             splitNumber:9,
            type: "gauge",
            radius: "80%", //占满div
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, "#67e0e3"],
                  [0.8, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 15,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 5,
              fontSize: 10,
            },
            detail: {
              valueAnimation: true,
              formatter: "B泵压力: {value}",
              fontSize: 19,
              offsetCenter: [0, "85%"],
              color: "auto",
            },
            title: {
            offsetCenter: [0, '50%'],
            textStyle: {
            color: "White",
          },
            fontSize: 10
            },
            data: [
              {
                value: 0,
                name: 'Mpa'
              },
            ],
          },
        ],
      },
      Poption: {
        series: [
          {
             min:0,
             max:63,
             splitNumber:9,
            type: "gauge",
            radius: "80%", //占满div
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, "#67e0e3"],
                  [0.8, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 15,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 5,
              fontSize: 10,
            },
            detail: {
              valueAnimation: true,
              formatter: "配比: {value}",
              fontSize: 21,
              offsetCenter: [0, "85%"],
              color: "auto",
            },
            data: [
              {
                value: this.Peibi,
              },
            ],
          },
        ],
      },

      Peibi: 66, //配比

      // 右侧两个柱状图
      Dayoption: null,
      Mountoption: null,
      //能耗累积量
      DayOffUse: [110, 24],
      MountOffUse: [120, 55],

      // 底部两个这折现图
      ButtomOption1: null,
      ButtomOption2: null,
      Xdata: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      XTimeData:[],
      UpLmit1: [],
      UpLmit2: [],
      LowLmit1: [],
      LowLmit2: [],
      danhaoValue: [],
      peibiValue: [],

      //实时数据
      Youqi_press: 50,
      Youqi_yuanliao: 0,
      Youqi_jiaoban: 0,

      Guhua_press: 50,
      Guhua_yuanliao: 0,
      Guhua_jiaoban: 0,

      DailyOutput: 0, //今日产量
      HistoryOutPut: 0, //历史产量

      timeCount: 0,
      daytimeCount:0,
    };
  },
  mounted() {
    for (let index = 0; index < 31; index++) {
      
      this.LowLmit1.push(18);
      this.UpLmit1.push(23);
    }
    this.initChart();
    this.initChart2();
    this.initChart3();
    var myVideo = document.getElementById("movies");
    myVideo.play();
    
    this.timer = setInterval(() => {
      this.getRealData();
      this.timeCount++;
      this.daytimeCount++;
      if (this.timeCount > 600) {
        //10分钟调用一次
        this.totalDayUsed();
         this.timeCount =0;
      }
       if (this.daytimeCount > 86401) {
        //每天调用一次
        this.totalMonthUsing();
         this.daytimeCount =0;
      }
    }, 1000);
    let _this =this;
    window.onresize = function(){
       _this.leftchart1.resize();
        _this.leftchart2.resize();
         _this.leftchart3.resize();
       _this.rightchart1.resize();
        _this.rightchart2.resize();
     _this.buttomchart1.resize();
     _this.buttomchart2.resize();
    }
  },
  created() {
    this.totalMonthUsing(); //加载本月消耗
    this.totalDayUsed();
  },
  beforeDestroy() {
    //页面关闭时清除定时器
    clearInterval(this.timer);
  },
  methods: {
    initChart() {
      this.leftchart1 = this.$echarts.init(
        document.getElementById("leftchart1")
      );
      this.leftchart2 = this.$echarts.init(
        document.getElementById("leftchart2")
      );
      this.leftchart3 = this.$echarts.init(
        document.getElementById("leftchart3")
      );
      this.leftchart1.setOption(this.Aoption);
      this.leftchart2.setOption(this.Boption);
      this.leftchart3.setOption(this.Poption);
    },
    initChart2() {
      this.rightchart1 = this.$echarts.init(
        document.getElementById("rightchart1")
      );
      this.rightchart2 = this.$echarts.init(
        document.getElementById("rightchart2")
      );
      this.Dayoption = {
        title: {
          text: "当日累计量",
           left:'center',
          textStyle: {
            color: "White",
          },
        },
       grid: {
           left: "40px",
          // top: "50px",
          right: "10px",
          // bottom: "30px",
        },
        xAxis: {
          type: "category",
          data: ["油漆", "固化剂"],
           axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        yAxis: {
          name: "Kg",
          type: "value",
           axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        series: [
          {
            barWidth: 70, //柱图宽度
            data: [120, 200],
            label: {
        show: true,
        color: 'white',
        position: 'top'
      },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorlist = ["#269E34", "blue"];
                  return colorlist[params.dataIndex];
                },
              },
            },
            type: "bar",
          },
        ],
      };
      this.Mountoption = {
        title: {
          left:'center',
          text: "当月累计量",
          textStyle: {
            color: "White",
          },
        },
         grid: {
            left: "40px",
          // top: "50px",
          right: "10px",
          // bottom: "30px",
        },
        xAxis: {
          type: "category",
          data: ["油漆", "固化剂"],
           axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        yAxis: {
          name: "吨",
          min:0,
          max:2,
          type: "value",
           axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        series: [
          {
            barWidth: 70, //柱图宽度
            data: [120, 200],
            label: {
        show: true,
        color: 'white',
        position: 'top'
      },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorlist = ["#269E34", "blue"];
                  return colorlist[params.dataIndex];
                },
              },
            },
            type: "bar",
          },
        ],
      };
      this.rightchart1.setOption(this.Dayoption);
      this.rightchart2.setOption(this.Mountoption);
    },
    initChart3() {
      this.buttomchart1 = this.$echarts.init(
        document.getElementById("buttomchart1")
      );
      this.buttomchart2 = this.$echarts.init(
        document.getElementById("buttomchart2")
      );

      this.ButtomOption1 = {
        title: {
          text: "油漆单耗趋势图",
           left: "center",
          textStyle: {
            color: "White",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "bottom",
          data: ["油漆单耗", "单耗上限", "单耗下限"],
          textStyle: {
            color: "White",
          },
        },
        grid: {
          top:"25px",
          left: "3%",
          right: "4%",
          bottom: "20px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.Xdata,
          axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        yAxis: {
          type: "value",
            min: 10,
            max: 40,
            //splitNumber: 10,
            axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        series: [
          {
            name: "油漆单耗",       
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#A1DA90",
                },
              },
            },
            data: this.danhaoValue,
          },
          {
            name: "单耗上限",
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "red",
                },
              },
            },
            data: this.UpLmit1,
          },
          {
            name: "单耗下限",
            type: "line",
            data: this.LowLmit1,
          },
        ],
      };

      this.ButtomOption2 = {
        title: {
          text: "油漆与固化剂配比趋势图",
           left: "center",
          textStyle: {
            color: "White",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "bottom",
          data: ["实际配比", "配比上限", "配比下限"],
          textStyle: {
            color: "White",
          },
        },
        grid: {
           top:"25px",
          left: "3%",
          right: "4%",
          bottom: "20px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.XTimeData,
          axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        yAxis: {
          type: "value",
          min: 10,
          max: 40,
           axisLine: {
                lineStyle: {
                  color:'White'
                }
            },
        },
        series: [
          {
            name: "实际配比",
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#A1DA90",
                },
              },
            },
            data: this.peibiValue,
          },
          {
            name: "配比上限",
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "red",
                },
              },
            },
            data: this.UpLmit2,
          },
          {
            name: "配比下限",
            type: "line",
            data: this.LowLmit2,
          },
        ],
      };
      this.buttomchart1.setOption(this.ButtomOption1);
      this.buttomchart2.setOption(this.ButtomOption2);
    },
    // 获取实时数据
    getRealData() {
      GetRealData().then((res) => {
        if (res.success) {
          var model = res.data;
          this.Youqi_press = model.Youqi_press;
          this.Youqi_yuanliao = model.Youqi_yuanliao;
          this.Youqi_jiaoban = model.Youqi_jiaoban;
          this.Guhua_press = model.Guhua_press;
          this.Guhua_yuanliao = model.Guhua_yuanliao;
          this.Guhua_jiaoban = model.Guhua_jiaoban;
          this.DailyOutput = model.Chanlaing; //产量
          this.Youqi_open1 =model.Youqi_open1;
          this.Youqi_switch1 =model.Youqi_switch1;
          this.Guhua_open2 =model.Guhua_open2;
          this.Guhua_switch2 =model.Guhua_switch2;
          this.Aoption.series[0].data[0].value = this.Youqi_press;
          this.Boption.series[0].data[0].value = model.Guhua_press;
          this.leftchart1.setOption(this.Aoption);
          this.leftchart2.setOption(this.Boption);
        }
      });
    },
    // 获取当月数据   每天刷新一次 
    totalMonthUsing() {
      TotalMonthUsed().then((res) => {
        if (res.success) {
          var model = res.data;
          this.MountOffUse = [model.TotalYouqiConsume, model.TotalGuhuaConsume];
          var list = model.YouqiConsume;       
          this.danhaoValue = [];
          for (let i = 0; i < list.length; i++) {
            this.danhaoValue.push(list[i]);
          }
          this.Mountoption.series[0].data = this.MountOffUse;
          this.ButtomOption1.series[0].data = this.danhaoValue;
          this.rightchart2.setOption(this.Mountoption);
          this.buttomchart1.setOption(this.ButtomOption1);
        }
      });
      // 产量数据
      MonthChanLiang(1008).then((res)=>{
          if (res.success) {
            this.HistoryOutPut =res.data;
          }
      });
    },
    // 十分钟刷新一次
    totalDayUsed() {
      TotalDayUsed().then((res) => {
        if (res.success) {
          var model = res.data;
          this.DayOffUse = [model.TotalYouqiConsume, model.TotalGuhuaConsume];
          this.Dayoption.series[0].data = this.DayOffUse;
          this.Peibi = model.Peibi;
          this.Poption.series[0].data[0].value = this.Peibi;
          this.leftchart3.setOption(this.Poption);
          this.rightchart1.setOption(this.Dayoption);          
        }
      });

      //配比趋势图
      GetPeibiChart().then((res)=>{
          if (res.success) {
          var list = res.data;
          this.XTimeData=[];
          this.peibiValue=[];
         this.LowLmit2=[];
          this.UpLmit2=[];
          for (let i = 0; i < list.length; i++) {
          this.XTimeData.push(list[i].Time);
          this.peibiValue.push(list[i].Peibi);
          this.LowLmit2.push(25);
          this.UpLmit2.push(29)
          }         
          this.ButtomOption2.xAxis.data =this.XTimeData;
          this.ButtomOption2.series[0].data = this.peibiValue;
          this.ButtomOption2.series[1].data = this.UpLmit2;
          this.ButtomOption2.series[2].data = this.LowLmit2;
          this.buttomchart2.setOption(this.ButtomOption2);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title{
  background-color: #274384; //#08134b;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7%;
  background: url("../../../assets/images/titleImg.png") no-repeat center center;
  font-size: 36px;
  font-weight: 300;
  color: #fff;
}
.contain {
  // padding: 12px;
  background-color: #274384; //#08134b;
  width: 100%;
  height: 100%;
  color: #fff;
  margin: 0px;
}
.contain_top {
  height: 68%;
   width: 100%;
  display: flex;

}
.contain_bottom {
  height: 24%;

  
}

.left {
  width: 306px;
  border: rgb(0, 132, 255) solid 2px;
}
.center {
  flex: 1;
  // background: url("../../../assets/images/pu3000.jpg") bottom center no-repeat #efeff4;
  background-size: 100% 100%;
  border: rgb(0, 132, 255) solid 2px;
}
.right {
  height: 100%;
  width: 306px;
  border: rgb(0, 132, 255) solid 2px;
}

#leftchart1,
#leftchart2,
#leftchart3 {
  width: 100%;
  height: 28.3%;
  margin-top: 5px;
}
#rightchart1,
#rightchart2 {
  width: 100%;
  height: 42%;
  margin-top: 10px;
}

.el-col {
  height: 100%;
}

.monitor_class {
  margin-top: 25px;
  margin-left: 20px;
  height: 50px;
  width: 50px;
}

.barchart_class {
  margin-top: 25px;
  margin-left: 20px;
  height: 50px;
  width: 50px;
}
.linechart_class {
  height: 50%;
  width: 100%;
}

#movies{
  object-fit: fill;
  height: 100%;
  width: 100%;
}

#chanlaingimg{
  object-fit: fill;
  height: 100%;
  width: 100%;
}

.ye{
  position: absolute;
  top: 5px;
}
</style>